<template>
  <div class="msg-content">

    <NoContent :show="messages.length == 0"/>

    <a class="msg" href="javascript:void(0)" v-for="notify in messages">
      <span>【{{ notify.typeName }}】<a v-html="notify.text" :title="notify.text"></a></span>
      <time>{{ notify.createTime }}</time>
    </a>

    <VanPagination v-model="page" :totalItems="total" @click-page="queryAllNotifys"
                   :itemsPerPage="rows" :showPageSize="5" :forceEllipses="true"/>

  </div>
</template>

<script>
import NoContent from '../NoContent.vue' ;
import VanPagination from "../VanPagination.vue";

export default {
  components: {
    NoContent,
    VanPagination
  },
  data() {
    return {
      messages: [],
      page: 1,
      rows: 10,
      total: 0,
    }
  },
  created() {
    this.queryAllNotifys();
  },
  methods: {
    queryAllNotifys() {
      return this.$api.queryNotifyList(this.page, this.rows).then(ret => {
        if (ret.status) {
          this.messages = ret.data.records;
          this.total = ret.data.total;
          // 获取 messages 中未读的消息个数
          let len = ret.data.records.filter(notify => !notify.nread).length ;
          if (len > 0) {
            this.$store.commit("storeMessage", {official: 0, letter: 0, notify: len * -1});
          }
        }
      })
    }
  }
}
</script>

<style>
</style>